<template>
  <div>
    <input 
      class="price-input input-style" 
      type="text" 
      readonly
      v-model="value"
      @keyup="changePrice($event)"
      placeholder="请添加"
    >
  </div>
</template>

<script>
import {mapMutations, mapGetters} from 'vuex'
export default {
  props: {
    inputValue: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 默认价格
      value: this.getSingleAmount
    }
  },
  methods: {
    // 设置单价
    changePrice(e) {
      let value = Number(e.target.value.replace(/\D/g,''))
      this.value = value
      this.$emit('click', value)
    },
    ...mapMutations('lottery', {
      setUnitPrice: 'SET_UNIT_PRICE',
      setSingleAmount: 'SET_SINGLE_AMOUNT'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getUnitPrice', 'getSingleAmount', 'getTotalAmount'])
  },
  watch: {
    'getTotalAmount'(newVal) {
      this.value = newVal
    }
  }
}
</script>

<style lang="stylus" scoped>
    .price-input
      outline-style: none 
      width 110px
      height 27px
      line-height 30px
      text-align center
      border-radius 3px
</style>